<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1">
    <meta name="description" content="Metro UI CSS">
    <meta name="author" content="Sergey Pimenov">
    <meta name="keywords" content="windows 8, modern style, Metro UI, style, modern, css, framework">

    <link href="css/modern.css" rel="stylesheet">
    <link href="css/modern-responsive.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet" type="text/css">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/assets/moment.js"></script>
    <script type="text/javascript" src="js/assets/moment_langs.js"></script>

    <script type="text/javascript" src="js/modern/dropdown.js"></script>
    <script type="text/javascript" src="js/modern/accordion.js"></script>
    <script type="text/javascript" src="js/modern/buttonset.js"></script>
    <script type="text/javascript" src="js/modern/carousel.js"></script>
    <script type="text/javascript" src="js/modern/input-control.js"></script>
    <script type="text/javascript" src="js/modern/pagecontrol.js"></script>
    <script type="text/javascript" src="js/modern/rating.js"></script>
    <script type="text/javascript" src="js/modern/slider.js"></script>
    <script type="text/javascript" src="js/modern/tile-slider.js"></script>
    <script type="text/javascript" src="js/modern/tile-drag.js"></script>
    <script type="text/javascript" src="js/modern/calendar.js"></script>
	
	<script type="text/javascript" src="js/mootools-core-1.4.5.js"></script>
	<script type="text/javascript" src="js/datepicker.js"></script>
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css" />
	
	
	 <link href="css/jquery-ui-timepicker-addon.css" rel="stylesheet">
	 <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
	 
	 
    <title>SimpleAuction</title>
</head>

<body class="metrouicss" onload="prettyPrint()">




<%
	String username = request.getParameter("username");
%>
    <div class="page secondary">
        <div class="page-header">
            <div class="page-header-content">
                <h1>Create Auction</h1>
            </div>
        </div>
		
		<form action = "/CreateAuction?username=<%=username%>" method = "get">
		
	        <div class="page-region">
	            <div class="page-region-content"> <br><br><br>
	
	                <div class="page-control span7" data-role="page-control">
	                    <span class="menu-pull"></span>
	                    <div class="menu-pull-bar"></div>
	
	                    <ul>
	                        <li class="active"><a href="#page1">Item</a></li>
	                    </ul>
	
	                    <div class="frames">
	                        <div class="frame active" id="page1">
							
								<div class="input-control text span5">
									<h4>Item Name</h4><input type="text" name = "itemName" maxlength="30"/>
								</div>
								
								<div class="input-control text span5">
									<h4>Description</h4><input type="text" name = "description" maxlength="30"/>
								</div>
								
								<h4>Category</h4>
								<div class="input-control select span5">
							        <select name = "category">
							            <option>games</option>
							            <option>music</option>
							            <option>other</option>
							        </select>
							    </div>
								
								<div class="input-control text span5">
									<h4>Base Price</h4><input type="text" name = "basePrice" maxlength="30"/>
								</div>
								
	                        </div>
	                    </div>
	                </div> <br><br>
					
					<div class="page-control span7" data-role="page-control">
	                    <span class="menu-pull"></span>
	                    <div class="menu-pull-bar"></div>
	
	                    <ul>
	                        <li class="active"><a href="#page1">Auction</a></li>
	                    </ul>
	
	                    <div class="frames">
	                        <div class="frame active" id="page1">
											

								<div class="control-group text span 5">
			                       <label class="control-label" for="start">Start Time</label>
			                             <div class="controls">
			                                 <input name="start" class="required" type="text" id="start" placeholder="Enter Start Date">
			                                 <script>
			                                     $('#start').datetimepicker();
			                                    </script>
			                             </div>  
			                      </div>
			                      
			                      <br><br>

									
								<div class="control-group text span 5">
			                       <label class="control-label" for="end">End Time</label>
			                             <div class="controls">
			                                 <input name="end" class="required" type="text" id="end" placeholder="Enter End Date">
			                                 <script>
			                                     $('#end').datetimepicker();
			                                    </script>
			                             </div>  
			                      </div>
								
								
	                        </div>
	                    </div>
	                </div><br>
					<input type = "hidden" name = "username" value = <%=username%>>
					<input type="submit" value="Create"/>
				</div>
			</div>
		</form>
	</div>
</body>
</html>